<!DOCTYPE html><html lang="zh" >


<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  
  
    <meta name="generator" content="Wowchemy 5.6.0 for Hugo" />
  

  
  












  
  










  







  
  
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  

  
  
  
    
      
      <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather&family=Roboto+Mono&display=swap">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather&family=Roboto+Mono&display=swap" media="print" onload="this.media='all'">
    
  

  
  
  
  
  
  

  

  
  
  
    
  
  <meta name="description" content="简介 本文主要讲述 div 布局相关知识。div 布局以盒子模型为基础，" />

  
  <link rel="alternate" hreflang="zh" href="https://songchuanrang.gitee.io/docs/div%E5%B8%83%E5%B1%80/" />

  
  
  
    <meta name="theme-color" content="#1565c0" />
  

  
  

  

  <link rel="stylesheet" href="/css/vendor-bundle.min.c7b8d9abd591ba2253ea42747e3ac3f5.css" media="print" onload="this.media='all'">

  
  
  
    
    

    
    
    
    
      
      
    
    
    

    
    
    

    

    
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      
        
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
  

  
  
  
  
  
  
  <link rel="stylesheet" href="/css/wowchemy.50151d350c96d255e89f810190000890.css" />

  
  
  
  
  
  
  
    
    
    <link rel="stylesheet" href="/css/libs/chroma/github-light.min.css" title="hl-light" media="print" onload="this.media='all'" >
    <link rel="stylesheet" href="/css/libs/chroma/dracula.min.css" title="hl-dark" media="print" onload="this.media='all'" disabled>
  

  
  



  


  


  




  
  
  

  
  

  
  
    <link rel="manifest" href="/manifest.webmanifest" />
  

  
  <link rel="icon" type="image/png" href="/media/icon_huec9f8681c90e5958ea60dec1a7d5fe8a_15532_32x32_fill_lanczos_center_3.png" />
  <link rel="apple-touch-icon" type="image/png" href="/media/icon_huec9f8681c90e5958ea60dec1a7d5fe8a_15532_180x180_fill_lanczos_center_3.png" />

  <link rel="canonical" href="https://songchuanrang.gitee.io/docs/div%E5%B8%83%E5%B1%80/" />

  
  
  
  
  
  
  
  
    
    
  
  

  
  
    
    
  
  <meta property="twitter:card" content="summary" />
  
    <meta property="twitter:site" content="@wowchemy" />
    <meta property="twitter:creator" content="@wowchemy" />
  
  <meta property="og:site_name" content="学习分享" />
  <meta property="og:url" content="https://songchuanrang.gitee.io/docs/div%E5%B8%83%E5%B1%80/" />
  <meta property="og:title" content="div盒子模型及html布局 | 学习分享" />
  <meta property="og:description" content="简介 本文主要讲述 div 布局相关知识。div 布局以盒子模型为基础，" /><meta property="og:image" content="https://songchuanrang.gitee.io/media/icon_huec9f8681c90e5958ea60dec1a7d5fe8a_15532_512x512_fill_lanczos_center_3.png" />
    <meta property="twitter:image" content="https://songchuanrang.gitee.io/media/icon_huec9f8681c90e5958ea60dec1a7d5fe8a_15532_512x512_fill_lanczos_center_3.png" /><meta property="og:locale" content="zh" />
  
    
      <meta
        property="article:published_time"
        content="2022-04-05T20:37:25&#43;08:00"
      />
    
    <meta property="article:modified_time" content="2022-04-05T20:37:25&#43;08:00">
  

  



  

  


  <title>div盒子模型及html布局 | 学习分享</title>

  
  
  
  











</head>


<body id="top" data-spy="scroll" data-offset="70" data-target="#TableOfContents" class="page-wrapper   " data-wc-page-id="8105a35b71f3b42132330ef8e7afa148" >

  
  
  
  
  
  
  
  
  
  <script src="/js/wowchemy-init.min.613040fe4f2c0f007b4dcb64404201cb.js"></script>

  


<aside class="search-modal" id="search">
  <div class="container">
    <section class="search-header">

      <div class="row no-gutters justify-content-between mb-3">
        <div class="col-6">
          <h1>搜索</h1>
        </div>
        <div class="col-6 col-search-close">
          <a class="js-search" href="#" aria-label="Close"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
        </div>
      </div>

      <div id="search-box">
        
        <input name="q" id="search-query" placeholder="搜索..." autocapitalize="off"
        autocomplete="off" autocorrect="off" spellcheck="false" type="search" class="form-control"
        aria-label="搜索...">
        
      </div>

      
      

      

    </section>
    <section class="section-search-results">

      <div id="search-hits">
        
      </div>

    </section>
  </div>
</aside>



  <div class="page-header">
    












<header class="header--fixed">
  <nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
    <div class="container-xl">

      
      <div class="d-none d-lg-inline-flex">
        <a class="navbar-brand" href="/">学习分享</a>
      </div>
      

      

      
      <div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
        <a class="navbar-brand" href="/">学习分享</a>
      </div>
      

      
      
      <div class="navbar-collapse main-menu-item collapse justify-content-start" id="navbar-content">

        
        <ul class="navbar-nav d-md-inline-flex">
          

        

          
        </ul>
      </div>

      <ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">

        
        

        
        
        <li class="nav-item">
          <a class="nav-link js-search" href="#" aria-label="搜索"><i class="fas fa-search" aria-hidden="true"></i></a>
        </li>
        

        
        
        
        <li class="nav-item dropdown theme-dropdown">
          <a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-label="Display preferences">
            <i class="fas fa-moon" aria-hidden="true"></i>
          </a>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-item js-set-theme-light">
              <span>浅色</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-dark">
              <span>深色</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-auto">
              <span>自动</span>
            </a>
          </div>
        </li>
        

        
        

      </ul>

    </div>
  </nav>
</header>


  </div>

  <div class="page-body">
    
    
    

    




<div class="container-fluid docs">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 docs-sidebar">
      <form class="docs-search d-flex align-items-center">
  <button class="btn docs-toggle d-md-none p-0 mr-md-3 w-100" type="button" data-toggle="collapse" data-target="#docs-nav" aria-controls="docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
    <div class="d-flex">
      <span class="d-md-none pl-1 flex-grow-1 text-left overflow-hidden">
        
        
          Docs
        
      </span>
      <span><i class="fas fa-chevron-down"></i></span>
    </div>
  </button>

  
  <button class="form-control sidebar-search js-search d-none d-md-flex">
    <i class="fas fa-search pr-2"></i>
    <span class="sidebar-search-text">搜索...</span>
    <span class="sidebar-search-shortcut">/</span>
  </button>
  
</form>

<nav class="collapse docs-links" id="docs-nav">
  
  
  
  
  
  

  
  
    





  
    
    
    
    
      
    
    

    
      <div class="docs-toc-item">
        <a class="docs-toc-link " href="/docs/">Docs</a>
    
      
        <ul class="nav docs-sidenav">
      


  <li class=""><a href="/docs/tomcat/">tomcat</a></li>



  <li class=""><a href="/docs/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a></li>



  <li class=""><a href="/docs/centos%E6%8C%82%E8%BD%BDiso%E6%96%87%E4%BB%B6%E4%BD%9C%E4%B8%BAyum%E5%AE%89%E8%A3%85%E6%BA%90/">centos挂载iso文件作为yum安装源</a></li>



  <li class=""><a href="/docs/java-nio/">JAVA NIO</a></li>



  <li class="active"><a href="/docs/div%E5%B8%83%E5%B1%80/">div盒子模型及html布局</a></li>



  <li class=""><a href="/docs/nginx/">nginx安装及配置</a></li>



  <li class=""><a href="/docs/gc%E6%97%A5%E5%BF%97%E5%88%86%E6%9E%90gcviewer/">GC日志分析之GCViewer</a></li>

      
        </ul>
      
    

    
      </div>
    

</nav>

    </div>

    
    
    <div class="d-none d-xl-block col-xl-3 docs-toc">
      












      <ul class="nav toc-top">
        <li><a href="#" id="back_to_top" class="docs-toc-title">在本页</a></li>
      </ul>

      <nav id="TableOfContents">
  <ul>
    <li><a href="#简介">简介</a></li>
    <li><a href="#盒子模型">盒子模型</a>
      <ul>
        <li><a href="#border-边框">border 边框</a></li>
        <li><a href="#margin-外边距">margin 外边距</a></li>
        <li><a href="#padding-内边距">padding 内边距</a></li>
      </ul>
    </li>
    <li><a href="#html-流式布局">HTML 流式布局</a>
      <ul>
        <li><a href="#html-普通流">html 普通流</a></li>
        <li><a href="#position">position</a></li>
        <li><a href="#float">float</a></li>
        <li><a href="#position-与-float-兼容性">position 与 float 兼容性</a></li>
      </ul>
    </li>
    <li><a href="#总结">总结</a></li>
  </ul>
</nav>

      











    </div>
    

    <main class="col-12 col-md-9 col-xl-7 py-md-3 pl-md-5 docs-content" role="main">

      <article class="article">

        <div class="docs-article-container">
          
            
  <nav class="d-none d-md-flex" aria-label="breadcrumb">
    <ol class="breadcrumb">
      
  
    
  
    
  

    <li class="breadcrumb-item">
      <a href="/">
        
          Home
        
      </a>
    </li>
  

    <li class="breadcrumb-item">
      <a href="/docs/">
        
          Docs
        
      </a>
    </li>
  

      <li class="breadcrumb-item active" aria-current="page">
        div盒子模型及html布局
      </li>
    </ol>
  </nav>




          
        </div>

        
        

        <div class="docs-article-container">
          
          <h1>div盒子模型及html布局</h1>

          <div class="article-style">

            
            

            <h2 id="简介">简介</h2>
<p>本文主要讲述 div 布局相关知识。div 布局以盒子模型为基础，描述 div 自身所占的范围大小；以 html 流式布局为指引，描述 div 的位置信息</p>
<h2 id="盒子模型">盒子模型</h2>
<p>描述元素各个部分所占范围大小
















<figure  >
  <div class="d-flex justify-content-center">
    <div class="w-100" ><img src="/images/img.png" alt="img.png" loading="lazy" data-zoomable /></div>
  </div></figure>

上图为盒子模型图，其中：</p>
<h3 id="border-边框">border 边框</h3>
<p>意为盒子模型的边界，以下 margin、padding 都是以此为参考距离</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">border</span><span class="o">:</span> <span class="nt">5px</span> <span class="nt">solid</span> <span class="nt">red</span><span class="o">;</span>
</span></span></code></pre></div><blockquote>
<p>参数依次表示：边框宽度、线条格式、颜色</p>
</blockquote>
<h3 id="margin-外边距">margin 外边距</h3>
<p>意为超出边界的范围，块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 示例：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">margin</span><span class="o">:</span> <span class="nt">10px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">margin</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">margin</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span> <span class="nt">15px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">margin</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span> <span class="nt">15px</span> <span class="nt">20px</span><span class="o">;</span>
</span></span></code></pre></div><blockquote>
<ul>
<li>只有一个值时表示的是 4 个外边距</li>
<li>两个值时，分别表示上和下、右和左外边距</li>
<li>三个值时，分别表示上、右和左、下外边距</li>
<li>四个值时，分别表示上、右、下、左外边距</li>
</ul>
</blockquote>
<h3 id="padding-内边距">padding 内边距</h3>
<p>意为元素边框与元素内容之间的空间。padding 值加上元素的 width 或 height 为元素实际的 width 或 height，实际表现为 padding 范围内同样存在背景</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">padding</span><span class="o">:</span> <span class="nt">10px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">padding</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">padding</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span> <span class="nt">15px</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="nt">padding</span><span class="o">:</span> <span class="nt">10px</span> <span class="nt">5px</span> <span class="nt">15px</span> <span class="nt">20px</span><span class="o">;</span>
</span></span></code></pre></div><blockquote>
<ul>
<li>只有一个值时表示的是 4 个内边距</li>
<li>两个值时，分别表示上和下、右和左内边距</li>
<li>三个值时，分别表示上、右和左、下内边距</li>
<li>四个值时，分别表示上、右、下、左内边距</li>
</ul>
</blockquote>
<h2 id="html-流式布局">HTML 流式布局</h2>
<p>描述元素在页面中所处的位置。当前元素的位置描述信息只会影响后方的元素，而不会对前方元素产生影响</p>
<h3 id="html-普通流">html 普通流</h3>
<p>如果不改变元素的默认样式前提下，元素在 HTML 的普通流中会“占用”一个位置，“占用”位置的大小、位置则是由元素的盒子模型来决定。而后续讲的 Position、Float 属性就是控制元素怎么脱离这个普通流的属性。</p>
<h3 id="position">position</h3>
<p>Position 的属性值共有四个：static、relative、absolute、fixed。</p>
<h4 id="static">static</h4>
<p>默认值，对于设置的 top、bottom、left、right 属性无效</p>
<h4 id="relative">relative</h4>
<p>相对定位，以上讲到元素在页面的普通流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移</p>
<h4 id="absolute">absolute</h4>
<p>绝对定位，元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置 position 属性值为 relative 或者 absolute 则该元素最终将对 body 进行位置偏移。应用了 position: absolute 的元素会脱离页面中的普通流并改变 Display 属性</p>
<h3 id="float">float</h3>
<p>float 的属性值有 none、left、right，有几个要点：</p>
<ul>
<li>只有横向浮动，并没有纵向浮动。</li>
<li>当元素应用了 float 属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。</li>
<li>会将元素的 display 属性变更为 block。</li>
<li>浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了 position 的元素相比浮动元素并不会遮盖后一个元素。</li>
<li>浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用 float）。</li>
</ul>
<h3 id="position-与-float-兼容性">position 与 float 兼容性</h3>
<ul>
<li>元素同时应用了 position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。</li>
<li>元素同时应用了 position: absolute 及 float 属性，则 float 失效。</li>
<li>第一个元素应用了 position 之后会覆盖着接下来的 float 元素（如果两个元素所处的位置相同）
<blockquote>
<p>回顾：如果你不将 float 的元素的 position 设置成 relative 的话，你想通过设置 float 元素的 z-index 来的达到覆盖 position:absolute 是无效的。同理，float 元素下面存在 position: absolute 的子元素，如果你不将 float 的元素的 position 设置成 relative 的话，absolute 元素是不会定位到 float 元素的。</p>
</blockquote>
</li>
<li>同时应用 position: absolute 和 float: left 会导致清除浮动无效（position: relative 则可以清除浮动）。</li>
</ul>
<blockquote>
<p>常用的清除浮动的方法有两种：</p>
<ul>
<li>通过在容器中添加一个标签，设置该标签的样式为 clear: both</li>
<li>容器设置 overflow: hidden</li>
</ul>
</blockquote>
<h2 id="总结">总结</h2>
<ul>
<li>使用 div 的 width、height 及 padding 调整大小</li>
<li>使用 position 或 float 调整位置信息</li>
</ul>


          </div>

          



          
          
          <div class="article-widget">
            
<div class="post-nav">
  
  
  
  <div class="post-nav-item">
    <div class="meta-nav">上一页</div>
    <a href="/docs/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="next">设计模式</a>
  </div>
  
  
</div>

          </div>
          
        </div>

        <div class="body-footer">
          <p>最近更新于 2022/4/5</p>

          




          




          


        </div>

      </article>

      <footer class="site-footer">

  












  

  

  

  
  






  
  
  

  
  
    
  
  
    
  

  

  
  <p class="powered-by copyright-license-text">
    © 2023 songchuanrang. This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0" rel="noopener noreferrer" target="_blank">CC BY NC ND 4.0</a>
  </p>
  

  <p class="powered-by footer-license-icons">
    <a href="https://creativecommons.org/licenses/by-nc-nd/4.0" rel="noopener noreferrer" target="_blank" aria-label="Creative Commons">
      <i class="fab fa-creative-commons fa-2x" aria-hidden="true"></i>
      <i class="fab fa-creative-commons-by fa-2x" aria-hidden="true"></i>
      
        <i class="fab fa-creative-commons-nc fa-2x" aria-hidden="true"></i>
      
      
        <i class="fab fa-creative-commons-nd fa-2x" aria-hidden="true"></i>
      
    </a>
  </p>




  <p class="powered-by">
    
    
    
      
      
      
      
      
      
      由<a href="https://wowchemy.com/?utm_campaign=poweredby" target="_blank" rel="noopener">Wowchemy</a>支持发布——免费<a href="https://github.com/wowchemy/wowchemy-hugo-themes" target="_blank" rel="noopener">开源</a>网站，为创作者赋能。
    
  </p>
</footer>


    </main>
  </div>
</div>

  </div>

  <div class="page-footer">
    
    
  </div>

  


<script src="/js/vendor-bundle.min.32ee83730ed883becad04bc5170512cc.js"></script>




  

  
  

  









<script src="https://cdn.jsdelivr.net/npm/anchor-js@5.0.0/anchor.min.js" integrity="sha256-aQmOEF2ZD4NM/xt4hthzREIo/2PFkOX/g01WjxEV7Ys=" crossorigin="anonymous"></script>
<script>
  anchors.add();
</script>





  
  <script id="search-hit-fuse-template" type="text/x-template">
    <div class="search-hit" id="summary-{{key}}">
      <div class="search-hit-content">
        <div class="search-hit-name">
          <a href="{{relpermalink}}">{{title}}</a>
          <div class="article-metadata search-hit-type">{{type}}</div>
          <p class="search-hit-description">{{snippet}}</p>
        </div>
      </div>
    </div>
  </script>
  
    <script src="https://cdn.jsdelivr.net/gh/krisk/Fuse@v3.2.1/dist/fuse.min.js" integrity="sha512-o38bmzBGX+hD3JHWUFCDA09btWaqrNmoJ3RXLlrysA7PP01Kgs4UlE4MhelE1v5dJR3+cxlR4qQlotsW7jKsnw==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/julmot/mark.js@8.11.1/dist/jquery.mark.min.js" integrity="sha512-mhbv5DqBMgrWL+32MmsDOt/OAvqr/cHimk6B8y/bx/xS88MVkYGPiVv2ixKVrkywF2qHplNRUvFsAHUdxZ3Krg==" crossorigin="anonymous"></script>
  












  
  
  
  
  
  
  







<script id="page-data" type="application/json">{"use_headroom":false}</script>











  
  


<script src="/zh/js/wowchemy.min.4e5e27caa14e13784384b84ea7186f46.js"></script>























</body>
</html>
